let mix = require('laravel-mix');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

mix.setPublicPath('public/static/dist');

mix.webpackConfig({
  plugins: [new MiniCssExtractPlugin()],
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [
          // {loader: 'style-loader'},
          MiniCssExtractPlugin.loader,
          {loader: 'css-loader'},
          {
            loader: 'less-loader', // compiles Less to CSS
            options: {
              lessOptions: {
                modifyVars: {
                  // 'primary-color': '#1DA57A',
                  // 'link-color': '#1DA57A',
                  'border-radius-base': '4px',
                },
                javascriptEnabled: true,
              },
            },
          }],
      }],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
})

mix.js('src/app.jsx', '').react();

